// var theta, phi;
// var phi_control, theta_control;
//
// phi_control = document.getElementById('phi');
// phi_control.oninput = update_phi;
// theta_control = document.getElementById('theta');
// theta_control.oninput = update_theta;

//定义一个矩形体：混合构造函数原型模式
function Cuboid(minX, maxX, minY, maxY, minZ, maxZ) {
    this.minX = minX;
    this.maxX = maxX;
    this.minY = minY;
    this.maxY = maxY;
    this.minZ = minZ;
    this.maxZ = maxZ;
}

Cuboid.prototype = {
    constructor: Cuboid,
    CenterX: function () {
        return (this.minX + this.maxX) / 2.0;
    },
    CenterY: function () {
        return (this.minY + this.maxY) / 2.0;
    },
    CenterZ: function () {
        return (this.minZ + this.maxZ) / 2.0;
    },
    LengthX: function () {
        return (this.maxX - this.minX);
    },
    LengthY: function () {
        return (this.maxY - this.minY);
    }
}

var currentAngle = [0.0, 0.0]; // 绕X轴Y轴的旋转角度 ([x-axis, y-axis])
var curScale = 1.0;   //当前的缩放比例

function drawScene(gl, packedInfos, deltaTime) {

    // update_phi();
    // update_theta();


    gl.clearColor(0.5, 0.5, 0.5, 1.0);
    gl.clearDepth(1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    // gl.depthFunc(gl.LEQUAL);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    //创建投影矩阵
    const fieldOfView = 45 * Math.PI / 180;
    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    const zNear = 0.1;
    const zFar = 100.0;

    var projectionMatrix = mat4.create();
    mat4.perspective(
        projectionMatrix,
        fieldOfView,
        aspect,
        zNear,
        zFar
    );

    for (var info of packedInfos) {
        if (!info.buffer.transparent) {
            buffer = info.buffer;
            modelViewMatrix = info.modelmatrixInfo;

            const normalMatrix = mat4.create();
            mat4.invert(normalMatrix, modelViewMatrix);
            mat4.transpose(normalMatrix, normalMatrix);

            matrixInfo = {
                projectionMatrix: projectionMatrix,
                modelViewMatrix: modelViewMatrix,
                normalMatrix: normalMatrix,
            }

            shaderProgramInfo = info.shaderProgramInfo;

            drawEntity(gl, shaderProgramInfo, buffer, matrixInfo);
        }
    }

    gl.depthMask(false);

    for (var info of packedInfos) {
        if (info.buffer.transparent) {
            buffer = info.buffer;
            modelViewMatrix = info.modelmatrixInfo;

            const normalMatrix = mat4.create();
            mat4.invert(normalMatrix, modelViewMatrix);
            mat4.transpose(normalMatrix, normalMatrix);

            matrixInfo = {
                projectionMatrix: projectionMatrix,
                modelViewMatrix: modelViewMatrix,
                normalMatrix: normalMatrix,
            }

            shaderProgramInfo = info.shaderProgramInfo;

            drawEntity(gl, shaderProgramInfo, buffer, matrixInfo);
        }
    }

    gl.depthMask(true);

    Rotation += deltaTime;
}
//
// function deg2rad(d) {
//     return d * Math.PI / 180;
// }
//
// function update_phi() {
//     var phi_new = parseInt(phi_control.value);
//     phi = deg2rad(phi_new);
// }
//
// function update_theta() {
//     var theta_new = parseInt(theta_control.value);
//     theta = deg2rad(theta_new);
// }

//注册鼠标事件
function initEventHandlers(canvas) {
    var dragging = false;         // Dragging or not
    var lastX = -1, lastY = -1;   // Last position of the mouse

    //鼠标按下
    canvas.onmousedown = function (ev) {
        var x = ev.clientX;
        var y = ev.clientY;
        // Start dragging if a moue is in <canvas>
        var rect = ev.target.getBoundingClientRect();
        if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {
            lastX = x;
            lastY = y;
            dragging = true;
        }
    };

    //鼠标离开时
    canvas.onmouseleave = function (ev) {
        dragging = false;
    };

    //鼠标释放
    canvas.onmouseup = function (ev) {
        dragging = false;
    };

    //鼠标移动
    canvas.onmousemove = function (ev) {
        var x = ev.clientX;
        var y = ev.clientY;
        if (dragging) {
            var factor = 100 / canvas.height; // The rotation ratio
            var dx = factor * (x - lastX);
            var dy = factor * (y - lastY);
            currentAngle[0] = currentAngle[0] + dy;
            currentAngle[1] = currentAngle[1] + dx;
        }
        lastX = x, lastY = y;
    };

    //鼠标缩放
    canvas.onmousewheel = function (event) {
        if (event.wheelDelta > 0) {
            curScale = curScale * 1.1;
        } else {
            curScale = curScale * 0.9;
        }
    };
}